<template>
    <div class="wh-100">
        <!--头部-->
        <head-components :title="title"></head-components>
        <!--内容-->
        <div class="w-100 d-flex-center" style="flex-direction: column">
            <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                <div>
                    <div>账户密码</div>
                    <div>
                        <span class="textclass">当前密码强度：</span>
                        <span :class="dynamicStyle">{{ strengthGrade }}</span>
                    </div>
                </div>
                <div style="color: #56a2f4; cursor: pointer" @click="changePassword()">修改</div>
            </div>
            <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                <div>
                    <div>绑定手机</div>
                    <div>
                        <span class="textclass">已绑定手机：</span>
                        <span class="textclass">15890115036</span>
                    </div>
                </div>
                <div style="color: #56a2f4; cursor: pointer" @click="changeMobilePhoneNumber()">修改</div>
            </div>
            <div class="w-95 d-flex-between-center ml-1 mr-1" style="height: 70px; border-bottom: 2px solid #eceff8">
                <div>
                    <div>密保问题</div>
                    <div><span class="textclass">未设置密保问题，密保问题可有效保护账户安全</span></div>
                </div>
                <div style="color: #56a2f4; cursor: pointer">暂不支持设置</div>
            </div>
        </div>
    </div>
</template>
<script>
import headComponents from './my-components/headComponents.vue';
import HeadComponents from './my-components/headComponents.vue';
export default {
    components: { HeadComponents },
    data() {
        return {
            strengthGrade: '中',
            title: '账户安全',
            dynamicStyle: ''
        };
    },
    methods: {
        changePassword() {
            console.log('修改账户密码');
        },
        changeMobilePhoneNumber() {
            console.log('修改手机号码');
        }
    }
};
</script>
<style>
.textclass {
    color: #989898;
}
</style>
